<div
  fxLayout="row wrap"
  fxLayout.lt-md="column"
  *ngIf="design"
  fxLayoutGap="1rem"
>
  <div fxFlex="65 1 0">
    <h2>
      {{ design.name }}
      <small
        >Rev. {{ design.rev | number }}
        <span class="text-secondary">{{ design.type.name }}</span>
      </small>
    </h2>

    <!-- Recap Line  -->
    <span
      class="recap"
      *ngIf="design"
      fxLayout="row"
      fxLayout.xs="column"
      fxLayoutAlign="space-between"
    >
      <span>
        <strong>Module count:</strong>
        <span
          class="monospace"
          nz-text
          [nzType]="
            design.modules.length <= design.type.maxModule ? '' : 'danger'
          "
        >
          {{ design.modules.length | format: true }}/{{
            design.type.maxModule | format: true
          }}
        </span></span
      >

      <span>
        <strong>Points:</strong>
        <span
          class="monospace"
          nz-text
          [nzType]="design.totalPoints <= design.type.maxPoints ? '' : 'danger'"
        >
          {{ design.totalPoints | format: true }}/{{
            design.type.maxPoints | format: true
          }}
        </span></span
      >

      <span>
        <strong>Energy:</strong>
        <span
          class="monospace"
          nz-text
          [nzType]="design.energy > 0 ? '' : 'danger'"
        >
          {{ design.energy | format }}</span
        >
      </span></span
    >

    <!-- Form  -->
    <form *ngIf="design" nz-form [nzLayout]="'horizontal'">
      <nz-form-item
        *ngFor="let line of design.modules; let i = index; trackBy: getLineId"
      >
        <nz-form-control
          [nzValidateStatus]="line.validateStatus"
          [nzErrorTip]="' ' + line.errorTip"
          [nzWarningTip]="' ' + line.warningTip"
        >
          <div fxLayout="row wrap" fxLayoutGap="0.5rem" fxLayout.lt-sm="column">
            <nz-cascader
              fxFlex="1 1 0"
              class="module-select"
              [name]="'module' + i"
              [nzLabelRender]="renderTpl"
              [nzOptions]="nzOptions"
              [(ngModel)]="line.uiModel"
              [nzOptionRender]="renderOptTpl"
              (ngModelChange)="onModuleChanges($event, i)"
            >
            </nz-cascader>

            <ng-template
              #renderTpl
              let-labels="labels"
              let-selectedOptions="selectedOptions"
            >
              <span
                *ngIf="selectedOptions"
                nz-typography
                [nzType]="
                  selectedOptions[selectedOptions.length - 1]?.mod &&
                  !selectedOptions[selectedOptions.length - 1]?.mod?.unlocked
                    ? 'warning'
                    : ''
                "
              >
                <i
                  nz-icon
                  [nzType]="
                    selectedOptions[selectedOptions.length - 1]?.mod?.shape
                  "
                ></i>
                <span>
                  {{ selectedOptions[selectedOptions.length - 1]?.label }}
                </span>
              </span>
            </ng-template>

            <ng-template #renderOptTpl let-option let-index="index">
              <span
                [nz-popover]="option?.mod"
                [nzPopoverTitle]="modTitleTemplate"
                [nzPopoverContent]="modTemplate"
                nzPopoverPlacement="right"
                [nzPopoverTrigger]="option?.mod ? 'hover' : 'null'"
                style="width: 100%"
                class="mod-options"
                nz-typography
                [nzType]="
                  option?.mod && !option?.mod?.unlocked ? 'warning' : ''
                "
              >
                <i nz-icon [nzType]="option?.mod?.shape"></i>
                <span>
                  {{ option.label }}
                </span>
              </span>

              <ng-template #modTitleTemplate>
                <i nz-icon [nzType]="option?.mod?.shape"></i>
                {{ option.label }}
              </ng-template>

              <ng-template #modTemplate>
                <div class="mod-info-container">
                  <app-module-info [mod]="option?.mod"></app-module-info>
                </div>
              </ng-template>
            </ng-template>

            <div fxLayout="row" fxLayoutGap="0.5rem">
              <nz-select
                *ngIf="line.module"
                [name]="'size' + i"
                [(ngModel)]="line.size"
                (ngModelChange)="reload()"
                style="width: 7rem"
              >
                <nz-option
                  *ngFor="let size of sizes; trackBy: getSizeId"
                  [nzValue]="size"
                  [nzLabel]="size | sizePipe"
                ></nz-option>
              </nz-select>
              <div style="line-height: 0">
                <input
                  nz-input
                  [(ngModel)]="line.levelUi"
                  [name]="'level-' + i"
                  (ngModelChange)="reload(i)"
                  class="levelNum"
                />
              </div>
              <i
                nz-icon
                nzType="minus-circle-o"
                class="dynamic-delete-button"
                (click)="removeLine(i)"
              >
              </i>
            </div>
          </div>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-control>
          <div fxLayout="row" fxLayoutAlign="center" style="width: 100%">
            <button
              nz-button
              nzType="dashed"
              class="add-button"
              (click)="addLine($event)"
              *ngIf="design.modules.length < design.type.maxModule"
            >
              <i nz-icon nzType="plus"></i>
              <span>Add Module</span>
            </button>
          </div>
        </nz-form-control>
      </nz-form-item>
    </form>

    <ng-template #custom let-selected>
      <span class="modSelect"
        ><i nz-icon [nzType]="getIcon(selected.nzValue)"></i>
        {{ selected.nzLabel }}
      </span>
    </ng-template>

    <!-- Buttons -->
    <nz-button-group>
      <button
        nz-button
        nzType="primary"
        [disabled]="isDisabled()"
        (click)="update()"
      >
        <i nz-icon nzType="save" nzTheme="outline"></i>
        <span>Update</span>
      </button>
      <button nz-button nzType="info" (click)="maximize()">
        <i nz-icon nzType="arrow-up" nzTheme="outline"></i>
        <span>Maximize</span>
      </button>
      <button
        nz-button
        nzDanger
        *ngIf="original.old"
        (click)="original.deleteOutDated()"
      >
        <span>Delete Outdated</span>
      </button>
      <button nz-button nzDanger (click)="delete()">
        <i nz-icon nzType="delete" nzTheme="outline"></i>
        <span>Delete Design</span>
      </button>
    </nz-button-group>

    <div style="margin-top: 0.5rem" *ngIf="otherDesigns.length > 0">
      <nz-form-label
        nzTooltipTitle="Next design will be used instead of this whe available."
        >Next Design</nz-form-label
      >
      <nz-select
        class="next-select"
        [(ngModel)]="original.next"
        nzAllowClear="true"
      >
        <nz-option
          *ngFor="let des of otherDesigns; trackBy: getDesId"
          [nzValue]="des"
          [nzLabel]="des.name"
        >
        </nz-option>
      </nz-select>
      <!-- {{ original.next?.name }} -->
    </div>

    <nz-alert
      *ngIf="design.energy < 0"
      nzType="warning"
      nzMessage="Energy is to low."
      nzShowIcon
    ></nz-alert>
    <nz-alert
      *ngIf="design.totalPoints > design.type.maxPoints"
      nzType="warning"
      nzMessage="Too many module points."
      nzShowIcon
    ></nz-alert>
    <nz-alert
      *ngIf="!design.available"
      nzType="info"
      nzMessage="Blueprint. Cannot be built."
      nzShowIcon
    ></nz-alert>
    <nz-alert
      *ngIf="blueprintWarning"
      nzType="error"
      nzMessage="Blueprint. Cannot update existing ships to a blueprint."
      nzShowIcon
    ></nz-alert>
  </div>

  <!-- Comparison Table -->

  <div fxFlex="35 1 0">
    <nz-tabset>
      <nz-tab nzTitle="Stats">
        <app-design-info
          [original]="original"
          [design]="design"
          [updateEmitter]="changeEmitter"
        ></app-design-info>
      </nz-tab>
      <nz-tab nzTitle="Weapons">
        <app-weapon-view
          [weapons]="design.weapons"
          *ngIf="design.weapons.length > 0"
        ></app-weapon-view>
      </nz-tab>
    </nz-tabset>
  </div>
</div>
